<template>
  <div>
    <loading  v-show="showLoading" class="editbox-load"></loading>
    <div class="editbox-layout" v-show="!showLoading">
      <!-- 左侧导航栏 s-->
      <div class="editbox-nav">
        <div class="editbox-input t-c">
          <el-input
          placeholder="输入API名称"
          v-model="filterText" size="medium" suffix-icon="el-icon-search" clearable>
          </el-input>
        </div>
        <div class="tree-h">
          <loading  v-if="showMenuLoading" class="editbox-load"></loading>
          <div class="tree-main" v-else>
            <vue-scroll class="mt10">
              <tree-view-item v-if="newTableData.length>0" :menus="newTableData" class="edit-list" @selectItem="menuClick" ref="editMenu"></tree-view-item>
            </vue-scroll>
          </div>
        </div>
      </div>
      <!-- 左侧导航栏 e-->
      <!-- 右侧代码框 s -->
      <div class="editbox-content">
        <div class="editbox-content-main">
          <div class="editbox-content-title ft-24">
            <span>new一个对象</span>
          </div>
          <div class="editbox-main-title" v-show="menuTitle.editName"><span class="selectd-rad-h14 mr5"></span>{{menuTitle.editName}}</div>
          <loading  v-if="showCodeLoading"></loading>
          <editCode v-else :reqContent.sync="reqContent"  :showReadCode="showReadCode"></editCode>
        </div>
      </div>
      <!-- 右侧代码框 e -->
      <editPop :row="rowData"></editPop>
    </div>
  </div>
</template>
<script>
import { getParents, clearSelect, setExpand, filterMenu } from '@/utils/utils'
import TreeViewItem from '@/components/common/TreeViewItem'
import editCode from './editCode'
import editPop from './editPop'
import { setTimeout } from 'timers';
export default {
  components: {
    TreeViewItem,
    editCode,
    editPop
  },
  props: {
  },
  data () {
    return {
      menuTitle: {
        editName: '',
        menuCode: ''
      },
      showLoading: true,
      showMenuLoading: true,
      showCodeLoading: true,
      showReadCode: false,
      curPlatIndex: '',
      curPlatText: '',
      filterText: '',
      menuList: [
        {
          'menuLevel': '1',
          'menuCode': '0',
          'menuName': '杀生丸',
          'expanded': false,
          'selected': false,
          'subMenuList': [
            {
              'menuLevel': '2',
              'menuCode': '01',
              'menuName': '杀生丸的儿子1',
              'expanded': false,
              'selected': false,
            },
            {
              'menuLevel': '2',
              'menuCode': '02',
              'menuName': '杀生丸的儿子2',
              'expanded': false,
              'selected': false,
              'subMenuList': [
                {
                  'menuLevel': '3',
                  'menuCode': '021',
                  'menuName': '杀生丸的儿子的儿子1',
                  'expanded': false,
                  'selected': false
                },
                {
                  'menuLevel': '3',
                  'menuCode': '022',
                  'menuName': '杀生丸的儿子的儿子2',
                  'expanded': false,
                  'selected': false
                }
              ]
            }
          ]
        },
        {
          'menuLevel': '1',
          'menuCode': '1',
          'menuName': '犬夜叉',
          'expanded': false,
          'selected': false,
          'subMenuList': [
            {
              'menuLevel': '2',
              'menuCode': '11',
              'menuName': '犬夜叉的儿子1',
              'expanded': false,
              'selected': false
            },
            {
              'menuLevel': '2',
              'menuCode': '12',
              'menuName': '犬夜叉的儿子2',
              'expanded': false,
              'selected': false
            }
          ]
        },
        {
          'menuLevel': '1',
          'menuCode': '2',
          'menuName': '杀生丸的老婆',
          'expanded': false,
          'selected': false,
          'subMenuList': [
            {
              'menuLevel': '2',
              'menuCode': '21',
              'menuName': '杀生丸的爱人1',
              'expanded': false,
              'selected': false,
            },
            {
              'menuLevel': '2',
              'menuCode': '22',
              'menuName': '杀生丸的爱人2',
              'expanded': false,
              'selected': false,
              'subMenuList': [
                {
                  'menuLevel': '3',
                  'menuCode': '221',
                  'menuName': '杀生丸的爱人的儿子1',
                  'expanded': false,
                  'selected': false
                },
                {
                  'menuLevel': '3',
                  'menuCode': '222',
                  'menuName': '地方',
                  'expanded': false,
                  'selected': false
                }
              ]
            }
          ]
        },
      ],
      rowData: {},
      reqUrl: 'http://158.50.11.142:30004',
      reqContent: ''
    }
  },
  computed: {
    newTableData: function () {
      var search = this.filterText
      if (search) {
        return filterMenu(search, this.menuList)
      }
      return this.menuList
    }
  },
  watch: {
  },
  created () {
    this.initAjax()
  },
  mounted () {
  },
  methods: {
    async initAjax () {
      this.initDocView()
    },
    initDocView () {
      this.showLoading = true
      const editIdJson = JSON.parse(localStorage.getItem('editIdJson'))
      if (!editIdJson) {
        this.menuTitle.editName = this.menuList[0].menuName
        const subMenuListTmp = this.menuList[0].subMenuList
        setExpand(this.menuList, subMenuListTmp[0].menuCode)
        this.ajaxCode(subMenuListTmp[0])
      } else {
        this.menuTitle = { ...editIdJson }
        this.ajaxCode(editIdJson)
        setExpand(this.menuList, editIdJson.menuCode)
      }
    },
    async changeMenu (val) {
      localStorage.removeItem('editIdJson')
      this.menuList = await this.getMenuList(val)
      this.initDocView()
    },
    menuClick (row) {
      console.log(row, 'sdfsdfsdf')
      if (row.menuLevel === 1) {
        return
      }
      clearSelect(this.menuList)
      getParents(this.menuList, row.menuCode)
      setExpand(this.menuList, row.menuCode)
      this.ajaxCode(row)
    },
    ajaxCode (row) {
      this.showMenuLoading = false
      this.showCodeLoading = true
      this.menuTitle.editName = row.transName
      setTimeout(() => {
        this.showLoading = false
        this.menuTitle.menuCode = row.menuCode
        const reqCode = {
          'a': 'b'
        }
        this.reqContent = JSON.stringify(reqCode)
        this.showCodeLoading = false
        localStorage.setItem('editIdJson', JSON.stringify(row))
      }, 1000)
    }
  },
  destroyed () {
  }
}
</script>
<style lang="less" scoped>
.tree-h, .tree-main{
  height:95%;
}
.editbox-layout{
  width:100%;
  position: relative;;
  display:flex;
  background-color:#fff;
  overflow:auto;
  box-sizing:border-box;
  min-height: 900px;
}
.editbox-load{
  min-height: 400px;
}
.editbox-nav{
  width: 300px;
  height: 600px;
  background: #fff;
  overflow: hidden;
  box-sizing: border-box;
}
.editbox-input{
  width: 96%;
  margin:0 auto;
  /deep/ .el-input__inner{
    height: 44px;
    background: #F8F8F8;
    border-radius: 4px;
    border:0;
  }
}
.edit-list{
  width: 100%;
  min-height:44px;
  color:#333;
  /deep/ .heading-button{
    height: 44px;
    line-height: 44px;
    box-sizing: border-box;
  }
  /deep/ .heading-button.menu-active{
    color:#36B9F6;
    background: #EEF5FF;
    border-right:2px solid #08AEF9;
  }
  /deep/ .level-title-1{
  padding-left:60px;
  }
  /deep/ .level-title-2{
    padding-left:80px;
  }
  /deep/ .level-title-3{
    padding-left:100px;
  }
  /deep/ .level-title-4{
    padding-left:120px;
  }
}
.editbox-main-title{
  margin-bottom:16px;
}
.editbox-content{
  padding: 20px 57px 50px;
  box-sizing: border-box;
  min-height: 100%;
  border-left: 1px solid #E7E7E7;
  overflow:hidden;
  box-sizing: border-box;
  background: #FFFFFF;
}
.editbox-content-nav{
  color:#BBBBBB;
}
.editbox-content-main {
  width:849px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-width:none;
  -ms-overflow-style:none;
  font-size: 18px;
  color:#333;
}
.editbox-content-main::-webkit-scrollbar{
  display:none;
}
.editbox-content-title{
  height: 73px;
  line-height: 73px;
  margin-bottom:8px;
  color:#324258;
  background: #fff;
  font-weight: 500;
  &-img{
    padding:0 15px 0 30px
  }
}
.edit-active{
  color:#333;
}

</style>
